<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>安装申请</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="css/mui.min.css">
		<link rel="stylesheet" href="css/native-toast.css" />
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
		<style type="text/css">
			.show-ph:before {
				content: attr(placeholder); //强制给placeholder属性
				color: #aaa // 这种灰色应该是最适合的
			}
			
			#input_time {
				color: #aaa;
			}
			
			#list {
				/*避免导航边框和列表背景边框重叠，看起来像两条边框似得；*/
				margin-top: -1px;
			}
			
			.mui-content {
				margin-top: 10px;
			}
		</style>
		<style type="text/css">
			.mask {
				position: absolute;
				top: 0px;
				filter: alpha(opacity=60);
				background-color: #777;
				z-index: 1002;
				left: 0px;
				opacity: 0.5;
				-moz-opacity: 0.5;
			}
		</style>
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=bTAhTWhjmLbpnArU3CSGLR0mnNDzGRzZ"></script>
	</head>

	<body>
		<!--<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-home mui-pull-left" href="jsq_home.html"></a>
    <h1 class="mui-title">dialog（消息框）</h1>
</header>-->
		<div class="mui-content mui-input-group" id="content">
			<div class="mui-input-row">
				<label>联系人</label>
				<input id="userName" type="text" class="mui-input-clear" placeholder="请输入联系人">
			</div>
			<div class="mui-input-row">
				<label>联系电话</label>
				<input id="mobile" type="text" class="mui-input-clear" placeholder="请输入联系电话">
			</div>
			</p>
			<div class="mui-input-row">
				<label>4位查询码</label>
				<input id="searchCode" type="number" class="mui-input-clear" placeholder="四位查询码">
			</div>
			<div style="margin-left: 16px;margin-right: 16px;">
				<font color="orange" size="2">
					查询码用于查询申请记录的状态，请填写容易记住的数字，如生日0818
				</font>
			</div>
			<div class="mui-input-row" style="height: 60px;">
				<label>期望上门安装时间</label>
				<input id="input_time" class="show-ph" type="datetime-local" placeholder="xxxx/xx/xx 上午xx:xx:xx" onfocus="this.removeAttribute('placeholder')">
			</div>
			</br>
			<div style="margin: 16px;">
				<font color="#2AC845" size="2">
					^_^ 白天要上班，所以上门安装时间，请填写非上班时间（周一~周五9:00-18:30）。提交申请后会和您电话确定合适的时间，谢谢您的光顾！
				</font>
			</div>
			<div id="allmap" style="width: 220px;height: 135px;margin: 16px;">
			</div>
			<div class="mui-input-row">
				<label>经纬度</label>
				<input id="location" type="text" value="" readonly="readonly">
				<!--经纬度展示-->
				<input id="longitude" type="hidden" value="">
				<!--经度-->
				<input id="latitude" type="hidden" value="">
				<!--纬度度-->
			</div>
			<div class="mui-input-row" style="height: 60px;">
				<label>详细地址</label>
				<textarea id="address" style="float:left;width:200px;height:80px;" placeholder="输入你想说的话">
				</textarea>
			</div>
			<div style="margin: 16px;">
				<font color="#2AC845" size="2">
					如果定位不准确，请开启GPS定位后刷新页面或者手动编辑，提供准确位置，方便与您取得联系！
				</font>
			</div>
			<button class="mui-btn mui-btn-primary" style="margin:5%;width:90%;height:48px;" onclick="createJsqOrder()">
		提交
	</button>
			<div style="width: 100%;height: 60px;">
				<span id="result"></span>
			</div>
		</div>

		<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
		<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
		<script type="text/javascript" src="js/global.js"></script>
		<script type="text/javascript" src="js/toast/toast_conf.js"></script>
		<script type="text/javascript" src="js/utils/cookies.js"></script>
		<script type="text/javascript" src="js/utils/base64.js"></script>
		<script type="text/javascript">
			// 百度地图API功能
			var map = new BMap.Map("allmap");
			var point = new BMap.Point(108.95, 34.27);
			map.centerAndZoom(point, 16);
			var geolocation = new BMap.Geolocation();
			geolocation.getCurrentPosition(function(r) {
				console.log(r.point)
				if(this.getStatus() == BMAP_STATUS_SUCCESS) {
					var location = document.getElementById("location");
					var longitude = document.getElementById("longitude");
					var latitude = document.getElementById("latitude");
					longitude.value = r.point.lng.toFixed(2);
					latitude.value = r.point.lat.toFixed(2);
					location.value = longitude.value + "，" + latitude.value;

					var mk = new BMap.Marker(r.point);
					map.addOverlay(mk); //标出所在地
					map.panTo(r.point); //地图中心移动
					//alert('您的位置：'+r.point.lng+','+r.point.lat);
					var point = new BMap.Point(r.point.lng, r.point.lat); //用所定位的经纬度查找所在地省市街道等信息
					var gc = new BMap.Geocoder();
					gc.getLocation(point, function(rs) {
						var addComp = rs.addressComponents;
						console.log(rs.address); //地址信息
						var address = document.getElementById("address");
						address.value = rs.address;
						//		               alert(rs.address);//弹出所在地址
					});
				} else {
					alert('failed' + this.getStatus());
				}
			}, {
				enableHighAccuracy: true
			})

			//显示加载器
			function showLoader() {
				//显示加载器.for jQuery Mobile 1.2.0
				showMask();
				$.mobile.loading('show', {
					text: '加载中...', //加载器中显示的文字  
					textVisible: true, //是否显示文字  
					theme: 'b', //加载器主题样式a-e  
					textonly: false, //是否只显示文字  
					html: "<img style='width: 100%;height: auto;' src='images/gif/loading.gif'/>" //要显示的html内容，如图片等  
				});
			}

			//隐藏加载器.for jQuery Mobile 1.2.0  
			function hideLoader() {
				hideMask();
				//隐藏加载器  
				$.mobile.loading('hide');
			}

			function createJsqOrder() {
				showLoader();
				var postJsqOrder = $.ajax({
					url: HOST + "jsqOrder/createOrder",
					data: JSON.stringify(getJsonData()),
					contentType: "application/json; charset=utf-8",
					type: "POST",
					dataType: 'json',
					timeout: 4000,
					beforeSend: function() {
						showLoader();
						saveFormData();
					},
					complete: function(XMLHttpRequest, status) {
						hideLoader();
						if(status == 'timeout') {
							//超时,status还有success,error等值的情况
							　　　　
							postJsqOrder.abort();
							toastPosIconError('网络超时');
						}
					},
					success: function(data) {
						parseData(data);
					},
					error: function(XMLHttpRequest, textStatus, errorThrown) {
						var base64 = new Base64();
						var str = base64.encode(XMLHttpRequest.responseText);
						location.href = "new_file.html?error=" + str;

						//              $( '#content').html("XMLHttpRequest.status:"+XMLHttpRequest.status
						//                  +"\nXMLHttpRequest.readyState:"+XMLHttpRequest.readyState
						//                  +"\nXMLHttpRequest.responseText:"+XMLHttpRequest.responseText);
					}
				});
			}

			function getJsonData() {
				var json = {
					"contactusername": $("#userName").val(),
					"contactphone": $("#mobile").val(),
					"searchcode": $("#searchCode").val(),
					"expectedtime": $("#input_time").val(),
					"longitude": parseFloat($("#longitude").val()).toFixed(2),
					"latitude": parseFloat($("#latitude").val()).toFixed(2),
					"address": $("#address").val()
				};
				return json;
			}

			function parseData(data) {
				//  	$('#result')
				//					.append('<p>code:'+data.code+'</p>')
				//                  .append('<p>message:'+data.message+'</p>')
				//                  .append('<p>data:'+data.data+'</p>')
				if(data.code == 0) {
					toastPosIconInfo(data.message);
				} else if(data.code == 1) {
					window.close();
					//  		window.location.href="jsq_create_success.html"; 
					$(function() {
						var url = "jsq_create_success.html" //被加载的页面url
						$("#content").load(url, null, function() {
							//							alert("加载成功")
						});
					});
				}
			}

			function saveFormData() {
				setCookie('contactusername', $('#userName').val(), 'h1'); //记录1小时
				setCookie('contactphone', $('#mobile').val(), 'd30'); //记录30天
				setCookie('searchcode', $('#searchCode').val(), 'm30'); //记录30分钟
			}

			setCookieDataToView();

			function setCookieDataToView() {
				if(getCookie('contactusername') != null) {
					document.getElementById("userName").value = getCookie('contactusername');
				}
				if(getCookie('contactphone') != null) {
					document.getElementById("mobile").value = getCookie('contactphone');
				}
				if(getCookie('searchcode') != null) {
					document.getElementById("searchCode").value = getCookie('searchcode');
				}
			}

			//兼容火狐、IE8   
			//显示遮罩层    
			function showMask() {
				$("#mask").css("height", $(document).height());
				$("#mask").css("width", $(document).width());
				$("#mask").show();
			}
			//隐藏遮罩层  
			function hideMask() {
				$("#mask").hide();
			}
		</script>
		<div id="mask" class="mask"></div>    
<a href="javascript:;" onclick="showMask()" >点我显示遮罩层</a><br />  
	</body>

</html>